<template>
	
	<div>		 
		<!-- 密码找回页头 -->
		<div>
			<div id="pwd_nav">
				<el-row type="flex" justify="space-between">
					<el-col :span="11" style="text-align: center;">
						<div style="color: #fff;line-height: 122px;">
							<img src="/img/0-logo-zc.png"  />
							<span style="margin-left: 50px;">重置密码</span>
						</div>
					
					</el-col>
					<el-col :span="5" style="text-align: center;color: #fff;line-height: 122px;">
						<span>问题咨询</span>
					</el-col>
					
				</el-row>
			</div>
			<div style="" class="b_steps">
				<el-steps :active="currentStep" align-center finish-status="success" >
				  <el-step title="确认账号"></el-step>
				  <el-step title="验证密码"></el-step>
				  <el-step title="重置密码"></el-step>
				  <el-step title="完成重置"></el-step>
				</el-steps>
				
			</div>
			
		</div>
		
		
		
		<!-- 确认账号 -->
		<div   class="content_pwd" v-show="step_1">
			<h3>请输入你要找回的密码账号:</h3>
			 <el-input
			    placeholder="请输入账号"
			   >
			 
			  </el-input>
			  <div id="" style="padding-top: 20px;">
			  	 <el-checkbox >阅读并同意 <router-link to="">《专业技术职称评审系统用户身份验证服务协议》</router-link></el-checkbox>
			  </div>
			<div id="" style="padding-top: 50px;">
				<el-button style="background: #253FDB;color: #fff;" class="button_b" @click="checkUsername">确认</el-button>
				<el-button  style="background: #EAEFFF;color: #98AFFF;margin-left: 10%;" class="button_b">取消</el-button>	
			</div>	
		</div>
		
		<!-- 验证账号 -->
		<div class="content_pwd" v-show="step_2">
			<p style="font-size: 20px;">请输入与您账号相关联的电话号码，我们会给您发送验证码来重置密码：</p>
			<div id="">
				<el-input prefix-icon="el-icon-user-solid" placeholder="请输入已绑定的手机号"></el-input>
				<el-row type="flex" justify="space-between" style="padding-top: 20px;">
					<el-col :span="15"><el-input prefix-icon=""></el-input></el-col>
					<el-col :span="5">
						<el-button style="width: 100%;">获取验证码</el-button>
					</el-col>
				</el-row>
				
				<div id="">
					<el-button style="" class="button_x" @click="accountverif">下一步</el-button>
				</div>
			</div>
		</div>
		
		<!-- 重置密码 -->
		<div class="content_pwd" v-show="step_3">
			<h3>请输入想要重置的密码</h3>
			<div id="">
				<el-input placeholder="请输入新的密码" prefix-icon="el-icon-lock" ></el-input>
				<span><i style="color: red;margin-right: 10px;">*</i>密码必须包含字母数字、下划线</span>
			</div>
			 
			 <div >
			 		<el-input placeholder="再次输入新的密码" prefix-icon="el-icon-lock" style="margin-top: 20px;"></el-input>
					<span> <i style="color: red;margin-right: 10px;">*</i> 请再次输入新的密码</span>
			 </div>
			 
			 <el-button class="button_x" @click="pwdreset">下一步</el-button>
			
		</div>
		
		<!-- 重置密码 成功 -->
		<div  class="content_pwd"  style="text-align: center;" v-show="step_4">
			<i class="el-icon-success" style="font-size: 200px;color: #0000EE;"></i>
			<h5>重置密码成功</h5>
			<el-button class="button_x" @click="tologin">返回首页</el-button>
			<p></p>
			
		</div>
		
	</div>
	
</template>

<script>
	
	
   export default {
		name:'passwordRetrieval',
		data(){
			return{
				currentStep:0,  //当前步骤
				step_1:true,
				step_2:false,
				step_3:false,
				step_4:false,
			}
		},
		methods:{
			//确认账号
			checkUsername(){
				
				//验证账号
				//
				this.currentStep+=1;
				this.step_1=false;
				this.step_2=true;
				
			},
			//验证码验证
			accountverif(){
				//验证账号
				//
				this.currentStep+=1;
				this.step_2=false;
				this.step_3=true;
			},
			//密码重置
			pwdreset(){
				//密码重置
				//
				this.currentStep+=1;
				this.step_3=false;
				this.step_4=true;
			},
			//去登陆
			tologin(){
				this.$router.push({path:'login'})
			}
			
			
			
		}
		
		
	}
</script>

<style  >
	.button_x{
		width: 100%;
		margin-top: 20px;
		color: #fff;
		background: rgb(37 63 219);
		font-size: 20px;
	}
	
	.content_pwd{
		width:650px;
		margin: 100px auto 0px auto;
	}
 .content_pwd .el-input__inner {
		background-color: #EAEFFF;
		border: none;
		font-size: 20px;
		padding-left: 60px;
}

 .content_pwd .el-input__prefix{
	 color: #285CE4;
	 font-size: 25px;
	 left: 30px;
	 
 }
 
 .button_b{
	 width: 45%;
	 color: #fff;
	 font-size: 20px;
 }
 
 
 #pwd_nav {
 	width: 100%;
 	height: 122px;
 	background: url(../../public/img/0-bg-top.png) no-repeat ;
	background-size: cover;
 	position: relative;
 }
 .b_steps{
 	height: 113px;
 	background-color: #E5EBFF;
 	padding-top: 30px;
 }
 
 .b_steps .el-step__icon{
 	width: 40px !important;
 	height: 40px !important;
 }
 
 .b_steps .el-step__line{
 	top: 20px !important;
 }
</style>
